<template>
	<view>
		<!-- 头部 -->
		<view class="header">
			<icons @click="backBeforePage" type="left" color="white" size="22"></icons>
			<view class="">{{data.name}}</view>
		</view>
		<view class="share">
			<view class="icon_box" @click="changeHeart">
				<icons :type="icon" color="#ffffff" size="40rpx"></icons>
			</view>
			<image src="../../../static/image/zhuanfa.png"></image>
		</view>
		<view class="box">
			<image :src="data.coverpic" mode=""></image>
		</view>
		<view class="vip">
			<view class="btn" @click="toMyVipPage">会员低至2元/月,免广告、看10000+名厨视频</view>
			<view class="name">{{data.name}}</view>
			<view class="collection">
				<text>{{data.pageview}}浏览</text>
				<icons type="eye-filled" size="12" color="#aaaaaa"></icons>
				<text class="text1">{{data.collections}}收藏</text>
				<icons type="star-filled" size="12" color="#aaaaaa"></icons>
			</view>
		</view>
		<view class="space"></view>
		<!-- heart -->
		<view class="heart">
			<view class="introduce">
				<text>心得</text>
				<view class="cont">
					{{data.tips[0].tipdescribe[0]}}
				</view>
			</view>
			<view class="introduce box2">
				<text>养生必读</text>
				<view class="cont">
					{{data.name}}:&nbsp;&nbsp;&nbsp;{{data.classtips}}
				</view>
			</view>
		</view>
		<view class="space"></view>
		<view class="cook">
			<view class="cook_head">
				<view class="time">
					<image src="/static/image/shijian@3x.png" mode=""></image>
					<text>{{data.needtime}}分钟以上</text>
				</view>
				<view class="stars">
					<image src="/static/image/xing @3x.png" mode=""></image>
					<text>切墩（{{data.grade | grade}}）</text>
				</view>
			</view>
			<!-- 用料 -->
			<view class="info_head">
				<text>用料</text>
				<text class="t2" @click="changeCollectState" :class="{active:!collectBtn}"
					v-text="collectBtn?'移除采购清单':'加入采购清单'"></text>
			</view>
			<view class="cook_item" v-for="(item,index) in data.ingredient" :key="index">
				<text class="t3">{{item.name}}</text>
				<text>{{item.number}}</text>
			</view>
			<!-- 方法 -->
			<view class="cook_method" v-for="(item,index) in data.method" :key="index">
				<view class="title">步骤 {{index + 1}}</view>
				<image :src="item.img" mode=""></image>
				<view class="method_item">
					{{item.describe}}
				</view>
			</view>
			<!-- 小贴士 -->
			<view class="tips">
				<view class="tip">
					小贴士
				</view>
				<view class="cont">
					{{data.tips[0].tipdescribe[0]}}
				</view>
			</view>
			<!-- 相关菜谱 -->
			<view class="menu">
				<view class="name">相关菜谱</view>
				<view class="box">
					<template v-for="(item,index) in otherData">
						<view v-if="index <= 3" :key="item._id">
							<image :src="item.coverpic" mode=""></image>
							<view class="title">{{item.name}}</view>
							<text>{{item.pageview}}</text>
							<icons type="eye-filled" size="12" color="#aaaaaa"></icons>
							<text class="t5">{{item.collections}}</text>
							<icons type="star-filled" size="12" color="#aaaaaa"></icons>
						</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import icons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue"
	import {
		getDetailApi,
		getBestVideoApi
	} from "../../../apis/search.js"
	import {
		getMyLikesApi,
		changeCollectApi,
		getRecordApi
	} from "../../../apis/mine.js"
	import {
		getUserInfo
	} from "../../../apis/user.js"
	export default {
		onLoad(option) {
			this.id = option.id
		},
		mounted() {
			//获取数据
			this.getDetailData()
			this.getBestVideoData()
			//得到token和userInfo
			const token = uni.getStorageSync("token")
			const userInfo = uni.getStorageSync("userInfo")
			if (token) {
				this.token = token
				this.userInfo = userInfo
				this.confirmIsLiked()
				this.confirmIsCollected()
				this.addMyRecord()
			}
		},
		data() {
			return {
				id: "",
				data: {},
				otherData: [],
				icon: "heart",
				token: "",
				userInfo: {},
				collectBtn: false
			};
		},
		methods: {
			//获取详情信息
			getDetailData() {
				getDetailApi({
					_id: this.id
				}).then(res => {
					this.data = res.message[0]
				})
			},
			//获取相关推荐
			getBestVideoData() {
				getBestVideoApi().then(res => {
					this.otherData = res.message
				})
			},
			//返回上一页
			backBeforePage() {
				uni.navigateBack()
			},
			//跳转我的vip页面
			toMyVipPage() {
				uni.navigateTo({
					url: "/pages/sub/myVip/myVip"
				})
			},
			//切换点赞红心状态
			changeHeart() {
				if (this.icon == "heart") this.icon = "heart-filled"
				else this.icon = "heart"
				//调用点赞接口
				if (this.userInfo._id) {
					getMyLikesApi({
						user_id: this.userInfo._id,
						menu_id: this.id
					}).then(res => {
						//更新本地用户信息
						this.getUserInfo(this.token)
					})
				}
			},
			//获取用户信息
			getUserInfo(token) {
				getUserInfo({
					token
				}).then(res => {
					//更新后的信息存储到本地
					const userInfo = res[0]
					uni.setStorageSync("userInfo", userInfo)
				})
			},
			//判断该菜品是否被点赞
			confirmIsLiked() {
				const res = this.userInfo.mylike.includes(this.id)
				if (res) this.icon = "heart-filled"
			},
			//判断该菜品是否被收藏
			confirmIsCollected() {
				const res = this.userInfo.mycollect.includes(this.id)
				if (res) this.collectBtn = true
			},
			//切换加入购物清单状态（收藏
			changeCollectState() {
				if (this.collectBtn) this.collectBtn = false
				else this.collectBtn = true
				//调用收藏接口
				if (this.userInfo._id) {
					changeCollectApi({
						user_id: this.userInfo._id,
						menu_id: this.id
					}).then(res => {
						//更新本地用户信息
						this.getUserInfo(this.token)
					})
				}
			},
			//加入浏览历史
			addMyRecord() {
				getRecordApi({
					user_id: this.userInfo._id,
					menu_id: this.id
				}).then(res => {
					//更新本地用户信息
					this.getUserInfo(this.token)
				})
			}
		},
		components: {
			icons
		},
		filters: {
			grade: function(val) {
				switch (val) {
					case "1":
						return "初级";
					case "2":
						return "中级";
					case "3":
						return "高级";
					case "4":
						return "高级";
					case "5":
						return "高级";
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	//头部
	.header {
		width: 100%;
		height: 150rpx;
		background-color: #ee7b2d;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;

		view {
			padding-top: 25rpx;
			line-height: 160rpx;
			text-align: center;
			color: #ffffff;
			font-size: 36rpx;
			font-weight: 550;
		}

		icons {
			position: absolute;
			top: 80rpx;
			left: 20rpx
		}
	}

	//分享
	.share {
		padding-top: 150rpx;
		width: 100%;
		height: 60rpx;
		background-color: #ee7b2d;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.icon_box {
			padding: 15rpx;
		}

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 30rpx
		}
	}

	//大图
	.box {
		width: 100%;
		height: 386rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	//开会员
	.vip {
		height: 280rpx;

		.btn {
			width: 686rpx;
			height: 88rpx;
			background-image: linear-gradient(270deg, #e7b564 0%, #f0c379 49%, #e7b564 100%);
			border-radius: 16rpx;
			margin: 28rpx auto 0rpx;
			font-size: 30rpx;
			color: #ffffff;
			font-weight: 550;
			text-align: center;
			line-height: 88rpx;

		}

		.name {
			margin-top: 50rpx;
			font-size: 34rpx;
			color: #2c2c2c;
			text-align: center;
			font-weight: 550;
			letter-spacing: 2rpx;

		}

		.collection {
			margin-top: 35rpx;
			text-align: center;
			font-size: 18rpx;
			color: #aaaaaa;

			icons {
				margin-left: 10rpx;
				vertical-align: middle;
			}

			.text1 {
				margin-left: 22rpx;
			}
		}
	}

	.space {
		height: 28rpx;
		background-color: #f6f7f8;
	}

	//心得
	.heart {
		width: 100%;
		box-sizing: border-box;
		padding: 32rpx;

		.introduce {
			.text {
				font-size: 28rpx;
				color: #2c2c2c;

			}

			.cont {
				margin-top: 30rpx;
				font-size: 28rpx;
				color: #686868;
				line-height: 40rpx;
			}
		}

		.box2 {
			margin-top: 40rpx;
		}
	}

	//做法
	.cook {
		width: 100%;
		box-sizing: border-box;
		padding: 32rpx;

		.cook_head {
			margin: 0 auto;
			width: 400rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #686868;

			image {
				width: 36rpx;
				height: 36rpx;
				vertical-align: middle;
				margin-right: 12rpx;
			}

			text {
				vertical-align: middle;

			}
		}

		//用料
		.info_head {
			height: 90rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #2c2c2c;

			.t2 {
				color: rgb(155, 155, 155);
			}

			.active {
				color: #ee7b2d;
			}
		}

		.cook_item {
			width: 100%;
			height: 70rpx;
			border-top: 1rpx solid #eaeaea;
			line-height: 70rpx;
			color: #686868;
			font-size: 28rpx;

			.t3 {
				display: inline-block;
				width: 440rpx;
			}
		}

		.cook_method {
			width: 100%;
			box-sizing: border-box;
			padding-top: 46rpx;

			&:last-child {
				border-bottom: 1rpx solid #c5c5c5;
			}

			.title {
				font-size: 30rpx;
				color: #2c2c2c;
				font-weight: bold;
			}

			image {
				margin-top: 26rpx;
				width: 100%;
				height: 440rpx;
				border-radius: 8rpx;
			}

			.method_item {
				font-size: 28rpx;
				color: #686868;
				padding: 28rpx 0rpx;

			}
		}

		/* 小贴士 */
		.tips {
			margin-top: 40rpx;
			width: 100%;
			border-radius: 8rpx;
			box-sizing: border-box;
			background-color: #eaeaea;
			padding: 40rpx;

			.tip {
				font-size: 30rpx;
				color: #161616;
				font-weight: bold;

			}

			.cont {
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #686868;
				letter-spacing: 2rpx;
				line-height: 40rpx;
			}
		}

		//相关菜谱
		.menu {
			margin-top: 40rpx;

			.name {
				font-size: 30rpx;
				color: #161616;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.box {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 20rpx;

				image {
					width: 100%;
					height: 248rpx;
					border-radius: 8rpx;
				}

				.title {
					font-size: 28rpx;
					color: #353535;
					font-weight: 550;
				}

				text {
					font-size: 22rpx;
					color: #aaaaaa;
				}

				.t5 {
					margin-left: 60rpx;
				}

				icons {
					margin-left: 10rpx;
				}
			}
		}
	}
</style>
